<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts-helper</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
    label{line-height: 40px;}
    .canvas-box{width: 100%; height: 430px; margin: 0 auto;}
    </style>
</head>
<body>
    <label>基础</label>
    <div class="canvas-box echart-canvas-01"></div>
    
    <label>异步</label>
    <div class="canvas-box echart-canvas-02"></div>
    <div class="canvas-box echart-canvas-03"></div>
    
    <!--
    <div class="canvas-box echart-canvas-04" 
        echart-url='http://op2.cc' 
        echart-config='{title:"分组得分占比图",type:"pie",name_key:"title",value_key:"get_score"}'></div>
    -->
    
</body>

<script src="jquery-1.9.1.min.js"></script>
<script src="echarts.min.js"></script>
<script src="../echarts.helper.js"></script>
<script>

    var drawData = {
        echart_data     : [{"title":"基础知识","get_score":11},{"title":"加分知识","get_score":12},{"title":"未分组","get_score":8}],
        echart_config   : {title:"分组得分占比图",type:"pie",name_key:"title",value_key:"get_score"}
    };
    $('.echart-canvas-01').drawEChart(drawData);

    // $('.echart-canvas-04').getDrawEChart();

    /*
    $('.echart-canvas-02').getDrawEChart({
        'url':'http://op2.cc',
        'drow_data':{               // 
            echart_config   : {title:"分组得分占比图",type:"pie",name_key:"title",value_key:"get_score"}
        }           
    });
    

    $('.echart-canvas-03').getDrawEChart({
        'url':'http://op2.cc',
        'success_key':'code',       // 数据请求成功标识字段名
        'success_val':'1',          // 数据请求成功标识字段值
        'data_key':'dataset',
        'drow_data':{               // 
            echart_config   : {title:"分组得分占比图",type:"pie",name_key:"title",value_key:"get_score"}
        }           
    });
    */



    /*
    $('body').EChartHelper({
        'canvasBox':'.echart-canvas',
        'chartOption':{
            'pie':{
                title : {
                    subtext: '纯属虚构123',
                },
            }
        }
    });
    */
</script>
</html>